<template>
  <div class="whiteday">
    <!-- banner -->
    <div class="banner">
      <img src="@/assets/images/activity/2018whiteday/banner314.png" alt="">
    </div>
    <div class="main">
      <!-- first -->
      <div class="first">
        <img src="@/assets/images/activity/2018whiteday/ic_title1.png" alt="">
        <div class="text">
          <p v-for="(item, index) in firstListText" :key="index">{{item}}</p>
        </div>
      </div>
      <!-- second -->
      <div class="second">
        <img src="@/assets/images/activity/2018whiteday/title2.png" alt="">
        <div class="goods">
          <div class="good-item" :class="{'is-received': !actNotStart && item.couponStatus === 0}" v-for="(item, index) in secondListGoods" :key="index">
            <div class="left">
              <router-link :to="`/detail/product?goodsId=${item.id}`" target="_blank"><img :src="item.img" alt=""></router-link>
            </div>
            <div class="right">
              <!-- 商品标题 -->
              <router-link :to="`/detail/product?goodsId=${item.id}`" target="_blank">
                <p class="title">{{item.title}}</p>
              </router-link>
              <!-- 折后价 -->
              <p class="after-discount">
                <span class="small-pink">ราคาโปรโมชั่น</span>
                <span class="big-pink">{{item.afterDiscount}}</span>
                <span class="small-pink">บาท</span>
              </p>
              <!-- 折扣金额 -->
              <p class="discount">
                <!--<img src="@/assets/images/activity/2018whiteday/ic_discount.png" alt="">-->
                <!--<span class="small-pink">บาท</span>-->
                ราคาเดิม <span class="font-19"><del>{{item.discount}}</del></span> บาท
              </p>
              <!-- 倒计时 || 购买按钮 -->
              <div class="countdown" v-if="actNotStart">
                <p class="lf">นับถอยหลัง</p>
                <div class="time-box lf">
                  <div class="time-num lf">{{time[0]}}</div>
                  <p class="lf">:</p>
                  <div class="time-num lf">{{time[1]}}</div>
                  <p class="lf">:</p>
                  <div class="time-num lf">{{time[2]}}</div>
                </div>
              </div>
              <div class="button button-disabled" type="button" v-else-if="item.couponStatus === 0 || item.couponStatus === 2 || item.couponStatus === 3 || item.couponStatus === 4">{{item.couponStatus === 0 ? 'ได้รับคูปองแล้ว' : item.couponStatus === 2 ? 'รับการเข้าคิว' : item.couponStatus === 3 ? 'ได้รับคูปอง' : item.couponStatus === 4 ? 'ได้รับคูปองแล้ว' : ''}}</div>
              <div class="button" type="button" v-else-if="item.couponStatus === 1" @click="pickCoupon(item.id)">
                <img src="@/assets/images/activity/2018whiteday/gift.png" alt="">
                รับคูปอง
                <img src="@/assets/images/activity/2018whiteday/get_into.png" alt="">
              </div>
            </div>
          </div>
          <div style="clear:both"></div>
        </div>
      </div>
      <!-- third -->
      <div class="third">
        <img src="@/assets/images/activity/2018whiteday/title3.png" alt="">
        <div class="goods">
          <div class="good-item" :class="{'is-received': !actNotStart && item.couponStatus === 0}" v-for="(item, index) in thirdListGoods" :key="index">
            <div class="left padding-top-17">
              <router-link :to="`/detail/product?goodsId=${item.id}`" target="_blank">
                <img :src="item.img" alt="">
              </router-link>
            </div>
            <div class="right">
              <div class="title">
                <router-link :to="`/detail/product?goodsId=${item.id}`" target="_blank">
                  <p class="title">{{item.title}}</p>
                </router-link>
              </div>
              <p class="after-discount">
                <span class="small-pink">ราคาโปรโมชั่น</span>
                <span class="big-pink">{{item.afterDiscount}}</span>
                <span class="small-pink">บาท</span>
              </p>
              <p class="discount">
                ราคาเดิม <span class="font-19"><del>{{item.discount}}</del></span> บาท
              </p>
              <!-- 倒计时 || 购买按钮 -->
              <div class="countdown" v-if="actNotStart">
                <p class="lf">นับถอยหลัง</p>
                <div class="time-box lf">
                  <div class="time-num lf">{{time[0]}}</div>
                  <p class="lf">:</p>
                  <div class="time-num lf">{{time[1]}}</div>
                  <p class="lf">:</p>
                  <div class="time-num lf">{{time[2]}}</div>
                </div>
              </div>
              <div class="button button-disabled" type="button" v-else-if="item.couponStatus === 0 || item.couponStatus === 2 || item.couponStatus === 3 || item.couponStatus === 4">{{item.couponStatus === 0 ? 'ได้รับคูปองแล้ว' : item.couponStatus === 2 ? 'รับการเข้าคิว' : item.couponStatus === 3 ? 'ได้รับคูปอง' : item.couponStatus === 4 ? 'ได้รับคูปองแล้ว' : ''}}</div>
              <div class="button" type="button" v-else-if="item.couponStatus === 1" @click="pickCoupon(item.id)">
                <img src="@/assets/images/activity/2018whiteday/gift.png" alt="">
                รับคูปอง
                <img src="@/assets/images/activity/2018whiteday/get_into.png" alt="">
              </div>
            </div>
          </div>
          <div style="clear:both"></div>
        </div>
      </div>
      <!-- fourth -->
      <div class="fourth">
        <img src="@/assets/images/activity/2018whiteday/title4.png" alt="">
        <div class="good-list">
          <div class="good-item" :class="{'margin-right-18': (index + 1) % 4 !== 0, 'margin-bottom-19': index < fourthListGoods.length - 4, 'is-received': !actNotStart && item.couponStatus === 0}" v-for="(item, index) in fourthListGoods" :key="index">
            <router-link :to="`/detail/product?goodsId=${item.id}`" target="_blank">
              <img :src="item.img" alt="">
              <p class="title">{{item.title}}</p>
            </router-link>
            <p class="after-discount">
              <!--ราคาพิเศษ：-->
              <span class="small-pink">ราคาโปรโมชั่น</span>
              <span class="big-pink">{{item.afterDiscount}}</span>
              <span class="small-pink">บาท</span>
            </p>
            <p class="discount">
              <!--<img src="@/assets/images/activity/2018whiteday/ic_discount.png" alt="">-->
              <!--ส่วนลด-->
              ราคาเดิม <span class="font-19"><del>{{item.discount}}</del></span> บาท
            </p>
            <!-- 倒计时 || 购买按钮 -->
            <div class="countdown" v-if="actNotStart">
              <p class="lf">นับถอยหลัง</p>
              <div class="time-box lf">
                <div class="time-num lf">{{time[0]}}</div>
                <p class="lf">:</p>
                <div class="time-num lf">{{time[1]}}</div>
                <p class="lf">:</p>
                <div class="time-num lf">{{time[2]}}</div>
              </div>
            </div>
            <div class="button button-disabled" type="button" v-else-if="item.couponStatus === 0 || item.couponStatus === 2 || item.couponStatus === 3 || item.couponStatus === 4">{{item.couponStatus === 0 ? 'ได้รับคูปองแล้ว' : item.couponStatus === 2 ? 'รับการเข้าคิว' : item.couponStatus === 3 ? 'ได้รับคูปอง' : item.couponStatus === 4 ? 'ได้รับคูปองแล้ว' : ''}}</div>
            <div class="button" type="button" v-else-if="item.couponStatus === 1" @click="pickCoupon(item.id)">รับคูปอง</div>
          </div>
          <div style="clear:both"></div>
        </div>
      </div>
    </div>
    <!-- 领券失败弹窗 -->
    <v-dialog v-if="isIdenShow">
      <div class="iden">
        <p class="txt">ขออภัย คูปองนี้สำหรับลูกค้า ที่ผ่านการยืนยันตัวตน</p>
        <p class="txt">เท่านั้น โปรดยืนยันตัวตนก่อน</p>
        <div class="button-container">
          <router-link to="/personal/identity" class="button" tag="div">ไปยืนยันตัวตน</router-link>
          <div class="button button-cancel" @click="isIdenShow = false">ปิด</div>
        </div>
      </div>
    </v-dialog>
    <!-- 提示弹窗 -->
    <v-dialog v-if="alertShow">
      <div class="alert">
        <p class="txt" v-html="alertText"></p>
        <div class="button-container">
          <div class="button button-cancel" @click="alertShow = false">รับทราบค่ะ</div>
        </div>
      </div>
    </v-dialog>
  </div>
</template>
<script>
import VDialog from '@/components/base/VDialog'
import { getCookie, contains } from '@/util/util'
export default {
  components: {
    VDialog
  },
  data () {
    return {
      // couponStatus: -1 - 加载中, 0 - 已领完, 1 - 未领取, 2 - 排队中, 3 - 已领取, 4 - 失败
      firstListText: [
        '1. คูปองเริ่มใช้ได้ตั้งแต่วันที่  12 มีนาคม 2561 เวลา 00.00 น. ถึง 16 มีนาคม 2561 เวลา 23.59 น.',
        '2. สิทธิการรับคูปอง1ใบต่อ1ท่าน คูปองทุกใบมีอายุการใช้งาน 10 ชั่วโมง  เมื่อเกินเวลาคูปองจะยกเลิกโดยอัตโนมัติ กรุณาใช้สิทธิทันทีเมื่อรับคูปอง',
        '3. คูปองนี้ใช้สำหรับสินค้าที่ร่วมรายการเท่านั้น',
        '4. คูปองนี้ไม่สามารถใช้ร่วมกับคูปองสิทธิพิเศษอื่นๆได้ เงื่อนไขของกิจกรรมนี้ให้เป็นไปตามข้อกำหนดของเวปไซต์ Thishop เท่านั้น',
        'วิธีใช้ ：คลิกที่ "รับคูปอง" เพื่อรับคูปองส่วนลดพิเศษทันที เมื่อท่านทำการสั่งซื้อ กรุณาเลือก "คูปอง" ระบบจะคำนวณราคาโดยอัตโนมัติ',
        'คลิกเพื่อยืนยันการใช้ "รหัสส่วนลด"  รับส่วนลดมากที่สุดทันที'
      ],
      // SWITCH
      // 正式
      secondListGoods: [
        {
          id: 440,
          title: 'iPhone 6 32GB',
          img: require('@/assets/images/activity/2018whiteday/ic_iphone6.png'),
          discount: '12,250',
          afterDiscount: '9,999',
          couponStatus: -1
        },
        {
          id: 551,
          title: 'VIVO V7 Plus 64GB',
          img: require('@/assets/images/activity/2018whiteday/ic_vivo.png'),
          discount: '10,999',
          afterDiscount: '9,999',
          couponStatus: -1
        }
      ],
      thirdListGoods: [
        {
          id: 474,
          title: 'Remax RB-T9',
          img: require('@/assets/images/activity/2018whiteday/ic_remax.png'),
          discount: 999,
          afterDiscount: 99,
          couponStatus: -1
        },
        {
          id: 744,
          title: 'Essence Soft Contouring Lipliner',
          img: require('@/assets/images/activity/2018whiteday/ic_pen.png'),
          discount: 210,
          afterDiscount: 10,
          couponStatus: -1
        }
      ],
      fourthListGoods: [
        {
          id: 1297,
          title: 'Mi Power Bank 2 10000mAh',
          img: require('@/assets/images/activity/2018whiteday/pic_mipower.png'),
          discount: '1,390',
          afterDiscount: 590,
          couponStatus: -1
        },
        {
          id: 664,
          title: 'MacBook Pro 13 inch Ram 8 GB/SSD 128 GB',
          img: require('@/assets/images/activity/2018whiteday/pic_macbook.png'),
          discount: '47,900',
          afterDiscount: '45,900',
          couponStatus: -1
        },
        {
          id: 385,
          title: 'Asus K456UQ-FA097',
          img: require('@/assets/images/activity/2018whiteday/Asus.png'),
          discount: '17,400',
          afterDiscount: '16,400',
          couponStatus: -1
        },
        {
          id: 441,
          title: 'Fujifilm X-A3',
          img: require('@/assets/images/activity/2018whiteday/Fujifilm.png'),
          discount: '20,990',
          afterDiscount: '17,990',
          couponStatus: -1
        },
        {
          id: 364,
          title: 'Samsung Galaxy S8 Rom 64GB',
          img: require('@/assets/images/activity/2018whiteday/pic_sumsung.png'),
          discount: '27,900',
          afterDiscount: '25,900',
          couponStatus: -1
        },
        {
          id: 442,
          title: 'Fujifilm X-A10 (WI-FI) + XC 16-50 mm',
          img: require('@/assets/images/activity/2018whiteday/pic_sharp.png'),
          discount: '16,990',
          afterDiscount: '14,990',
          couponStatus: -1
        },
        {
          id: 984,
          title: 'Sharp Refrigerator 1 Door 6.5Q SJ-G19S',
          img: require('@/assets/images/activity/2018whiteday/pic_sharpr.png'),
          discount: '5,590',
          afterDiscount: '4,990',
          couponStatus: -1
        },
        {
          id: 1005,
          title: 'Sharp Microwave Grill20L R-642p',
          img: require('@/assets/images/activity/2018whiteday/pic_sharpm.png'),
          discount: '2,690',
          afterDiscount: '1,690',
          couponStatus: -1
        }
      ],
      // 测试
      /* secondListGoods: [
        {
          id: 440,
          title: 'iPhone 6 32GB',
          img: require('@/assets/images/activity/2018whiteday/ic_iphone6.png'),
          discount: 2251,
          afterDiscount: 9999,
          couponStatus: -1
        },
        {
          id: 551,
          title: 'VIVO V7 Plus 64GB',
          img: require('@/assets/images/activity/2018whiteday/ic_vivo.png'),
          discount: 1000,
          afterDiscount: 9999,
          couponStatus: -1
        }
      ],
      thirdListGoods: [
        {
          id: 385,
          title: 'Remax RB-T9',
          img: require('@/assets/images/activity/2018whiteday/ic_remax.png'),
          discount: 999,
          afterDiscount: 99,
          couponStatus: -1
        },
        {
          id: 442,
          title: 'Essence Soft Contouring Lipliner',
          img: require('@/assets/images/activity/2018whiteday/ic_pen.png'),
          discount: 210,
          afterDiscount: 10,
          couponStatus: -1
        }
      ],
      fourthListGoods: [
        {
          id: 474,
          title: 'Mi Power Bank 2 10000mAh',
          img: require('@/assets/images/activity/2018whiteday/pic_mipower.png'),
          discount: 800,
          afterDiscount: 590,
          couponStatus: -1
        },
        {
          id: 1,
          title: 'MacBook Pro 13 inch Ram 8 GB/SSD 128 GB',
          img: require('@/assets/images/activity/2018whiteday/pic_macbook.png'),
          discount: 2000,
          afterDiscount: 45900,
          couponStatus: -1
        },
        {
          id: 364,
          title: 'Asus K456UQ-FA097',
          img: require('@/assets/images/activity/2018whiteday/Asus.png'),
          discount: 1000,
          afterDiscount: 16400,
          couponStatus: -1
        },
        {
          id: 2,
          title: 'Fujifilm X-A3',
          img: require('@/assets/images/activity/2018whiteday/Fujifilm.png'),
          discount: 3000,
          afterDiscount: 17990,
          couponStatus: -1
        },
        {
          id: 3,
          title: 'Samsung Galaxy S8 Rom 64GB',
          img: require('@/assets/images/activity/2018whiteday/pic_sumsung.png'),
          discount: 2000,
          afterDiscount: 25900,
          couponStatus: -1
        },
        {
          id: 664,
          title: 'Fujifilm X-A10 (WI-FI) + XC 16-50 mm',
          img: require('@/assets/images/activity/2018whiteday/pic_sharp.png'),
          discount: 2000,
          afterDiscount: 14990,
          couponStatus: -1
        },
        {
          id: 441,
          title: 'Sharp Refrigerator 1 Door 6.5Q SJ-G19S',
          img: require('@/assets/images/activity/2018whiteday/pic_sharpr.png'),
          discount: 600,
          afterDiscount: 4990,
          couponStatus: -1
        },
        {
          id: 4,
          title: 'Sharp Microwave Grill20L R-642p',
          img: require('@/assets/images/activity/2018whiteday/pic_sharpm.png'),
          discount: 1000,
          afterDiscount: 1690,
          couponStatus: -1
        }
      ], */
      isIdenShow: false, // 身份认证弹窗开关
      needCertification: true, // 领券是否需要认证
      alertShow: false, // 提示弹窗开关
      alertText: 'กำลังจัดการให้，โปรดรอสักครู่', // alert提示文字
      pollingList: [], // 轮询列表
      // actStartTime: 1521129600000, // 活动开始时间
      // actEndTime: 1521216000000, // 活动结束时间
      actNotStart: false, // 显示倒计时（活动未开启）
      restTime: null, // 剩余时间
      realStartCountdown: false, // 是否真正开始活动
      restTimeEnd: null, // 剩余时间
      isEnd: false, // 活动是否进入结束状态
      canClick: true // 防止重复点击
    }
  },
  methods: {
    // 初始化优惠码状态 SWITCH
    init () {
      this.$store.commit('toast', { switch: true, showType: 'requesting' })
      // 获取时间差
      this.$ajax.getActiveTime().then(res => {
        if (res.code === 200) {
          this.restTime = res.data.to_start * 1000
          this.restTimeEnd = res.data.to_end * 1000
          // 初始化活动结束倒计时状态
          if (this.restTimeEnd > 0) { this.countdownEnd() } else { this.isEnd = true; this.actNotStart = false; this.openAlert('กิจกรรมส่วนลดครั้งนี้จบแล้ว<br>กรุณารอเหตุการณ์ครั้งที่ถัดไป'); return }
          // 0-9点间弹窗并将倒计时增加9h
          if (this.restTime <= 0 && this.restTime > -32400000) {
            this.openAlert('คูปองรอบที่1ได้แจกหมดแล้ว<br><span style="color:#FF6364">รอบที่2</span>เริ่มแจกเวลา<span style="color:#FF6364">9โมงเช้า</span> โปรดติดตาม')
            this.restTime += 32400000
            this.isEnd = true
            this.actNotStart = false
          } else {}
          // 初始化活动开始倒计时状态
          if (this.restTime > 0) { this.actNotStart = true; this.countdown(); return } else {}
          let goodList = '440,551,1297,984,385,442,474,744,364,664,441,1005'
          // 初始化活动进行中状态
          this.$ajax.getGoodsCouponStatus({ goods_ids: goodList }).then(res => {
            if (res.code === 200) {
              let arr = (this.secondListGoods.concat(this.thirdListGoods)).concat(this.fourthListGoods)
              let pushPolling = true
              // 初始化优惠券状态
              for (let key in res.data.conpon_status) {
                arr.forEach((item, index) => {
                  // 初始化优惠券状态
                  if (item.id === parseInt(key)) {
                    item.couponStatus = parseInt(res.data.conpon_status[key])
                  }
                  // 初始化轮询列表
                  if (pushPolling && res.data.conpon_status[key] === 2) this.pollingList.push(parseInt(key)); pushPolling = false
                })
              }
              // 禁用虚拟商品 - 测试
              /* this.fourthListGoods.forEach(item => {
                if (item.id === 1 || item.id === 2 || item.id === 3 || item.id === 4) item.couponStatus = 0
              }) */
              // 禁用虚拟商品 - 正式
              this.fourthListGoods.forEach(item => {
                if (item.id === 664 || item.id === 441 || item.id === 364 || item.id === 1005) item.couponStatus = 0
              })
            } else {
              this.$store.commit('alert', {switch: true, alertText: this.$t('message.errorMessage')})
            }
            this.$store.commit('toast', { switch: false })
          }).catch(err => {
            this.$store.commit('alert', {switch: true, alertText: this.$t('message.errorMessage')})
          })
        }
      })
    },
    // 开启倒计时 SWITCH
    countdown () {
      this.interval = setInterval(() => {
        this.restTime -= 1000
        if (this.restTime <= 0) {
          // 第一次倒计时结束处理
          if (!this.realStartCountdown) {
            this.restTime += 32400000
            this.realStartCountdown = true
            this.isEnd = true
            this.actNotStart = false
            this.openAlert('คูปองรอบที่1ได้แจกหมดแล้ว<br><span style="color:#FF6364">รอบที่2</span>เริ่มแจกเวลา<span style="color:#FF6364">9โมงเช้า</span> โปรดติดตาม')
            return
          } else {}
          this.actNotStart = false
          this.$store.commit('toast', { switch: true, showType: 'requesting' })
          let goodList = '440,551,1297,984,385,442,474,744,364,664,441,1005'
          // 初始化活动进行中状态
          this.$ajax.getGoodsCouponStatus({ goods_ids: goodList }).then(res => {
            if (res.code === 200) {
              let arr = (this.secondListGoods.concat(this.thirdListGoods)).concat(this.fourthListGoods)
              let pushPolling = true
              // 初始化优惠券状态
              for (let key in res.data.conpon_status) {
                arr.forEach((item, index) => {
                  // 初始化优惠券状态
                  if (item.id === parseInt(key)) {
                    item.couponStatus = parseInt(res.data.conpon_status[key])
                  }
                  // 初始化轮询列表
                  if (pushPolling && res.data.conpon_status[key] === 2) this.pollingList.push(parseInt(key)); pushPolling = false
                })
              }
              // 禁用虚拟商品 - 测试
              /* this.fourthListGoods.forEach(item => {
                if (item.id === 1 || item.id === 2 || item.id === 3 || item.id === 4) item.couponStatus = 0
              }) */
              // 禁用虚拟商品 - 正式
              this.fourthListGoods.forEach(item => {
                if (item.id === 664 || item.id === 441 || item.id === 364 || item.id === 1005) item.couponStatus = 0
              })
            } else {
              this.$store.commit('alert', {switch: true, alertText: this.$t('message.errorMessage')})
            }
            this.$store.commit('toast', { switch: false })
          }).catch(err => {
            this.$store.commit('alert', {switch: true, alertText: this.$t('message.errorMessage')})
          })
          clearInterval(this.interval)
        }
      }, 1000)
    },
    // 开启结束倒计时
    countdownEnd () {
      this.intervalEnd = setInterval(() => {
        this.restTimeEnd -= 1000
        if (this.restTimeEnd <= 0) {
          this.isEnd = true
          clearInterval(this.intervalEnd)
        }
      }, 1000)
    },
    // 开启提示弹窗
    openAlert (txt) {
      this.alertShow = true
      this.alertText = txt
    },
    // 抢券
    pickCoupon (id) {
      if (!this.canClick) { return } else { this.canClick = false }
      this.$store.commit('toast', { switch: true, showType: 'requesting' })
      // 验证是否登录
      if (!getCookie('username')) {
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        this.canClick = true
        this.$store.commit('toast', { switch: false })
        return
      } else {}
      // 需要认证走这里（只走一次）
      if (this.needCertification) {
        this.checkIden(id)
      } else {
        this.crab(id)
      }
    },
    // 验证身份认证是否通过
    checkIden (id) {
      this.$ajax.identityInfo().then(res => {
        let idenPassButNotCompleteIdenInfo = res.code === 200 && (!res.data.real_name && !res.data.sex && !res.data.idno && !res.data.university && !res.data.specialty && !res.data.studentid) // 认证通过但未补全信息
        let idenExpired = res.code === 208 // 认证过期
        let noIden = res.code === 202 // 尚未认证
        let underReview = res.code === 204 // 审核中
        let idenFailed = res.code === 206 // 认证不通过
        if (idenPassButNotCompleteIdenInfo || idenExpired || noIden || underReview || idenFailed) {
          this.isIdenShow = true
          this.canClick = true
          this.$store.commit('toast', { switch: false })
        } else { this.checkQuota(id) }
      }).catch(err => {
        this.$store.commit('alert', {switch: true, alertText: this.$t('message.errorMessage')})
      })
    },
    // 验证是否有额度
    checkQuota (id) {
      this.$ajax.getOrderlimit().then(res => {
        if (res.code === 200) {
          if (parseInt(res.data.total_quota) <= 0) {
            this.openAlert('อยู่ระหว่างการจัดการข้อมูล<br>จำนวนเงิน กรุณารอสักครู่')
            this.canClick = true
          } else {
            this.needCertification = false
            this.crab(id)
          }
        }
      }).catch(err => {
        this.$store.commit('alert', {switch: true, alertText: this.$t('message.errorMessage')})
      })
    },
    // 抢券: 进入队列、重写轮询
    crab (id) {
      this.$ajax.enterCouponQueue({ goods_id: id }).then(res => {
        if (res.code === 200) {
          if (res.data.enqueue === 0) {
            this.$store.commit('toast', { switch: true, showType: 'toast', toastText: '抢券失败' })
          } else if (res.data.enqueue === 1) {
            let arr = (this.secondListGoods.concat(this.thirdListGoods)).concat(this.fourthListGoods)
            arr.forEach((item, index) => { if (item.id === id) item.couponStatus = 2 })
            this.$store.commit('toast', { switch: true, showType: 'toast', toastText: `<img src="${require('@/assets/images/ic_success.png')}" style="width:30px;height:30px">ได้รับคูปอง` })
          } else if (res.data.enqueue === 2) {
            this.$store.commit('toast', { switch: true, showType: 'toast', toastText: '已抢过该券' })
          }
        }
        this.canClick = true
        this.$store.commit('toast', { switch: false })
      }).catch(err => {
        this.$store.commit('alert', {switch: true, alertText: this.$t('message.errorMessage')})
      })
      if (!contains(this.pollingList, id)) {
        this.pollingList.push(id)
      }
    }
  },
  computed: {
    // 倒计时生成时分秒
    time () {
      if (this.restTime >= 0) {
        let time = new Date(this.restTime)
        let hour = time.getTime() / 3600000
        let hourNum = hour > 99 ? 99 : Math.floor(hour)
        hourNum = hourNum < 10 ? `0${hourNum}` : hourNum
        let minute = time.getMinutes()
        let minuteNum = minute < 10 ? `0${minute}` : minute
        let second = time.getSeconds()
        let secondNum = second < 10 ? `0${second}` : second
        return [hourNum, minuteNum, secondNum]
      } else {
        return ['00', '00', '00']
      }
    }
  },
  watch: {
    pollingList (val) {
      this.polling = setInterval(() => {
        // 若轮询列表为空，则注销定时器
        if (this.pollingList.length === 0) { clearInterval(this.polling); return } else {}
        this.$ajax.getCouponResult({ goods_ids: this.pollingList.join(',') }).then(res => {
          let arr = (this.secondListGoods.concat(this.thirdListGoods)).concat(this.fourthListGoods)
          if (res.code === 200) {
            for (let key in res.data.list) {
              arr.forEach((item, index) => {
                if (item.id === parseInt(key)) {
                  // 更新优惠券状态
                  item.couponStatus = parseInt(res.data.list[key])
                  // 若领券成功则弹窗提示
                  if (item.couponStatus === 3) this.$store.commit('toast', { switch: true, showType: 'toast', toastText: `<img src="${require('@/assets/images/ic_success.png')}" style="width:30px;height:30px">ได้รับคูปอง` })
                  // 已获取结果的优惠券清理出轮询列表
                  if (item.couponStatus === 3 || item.couponStatus === 4) {
                    let i = this.pollingList.indexOf(parseInt(key))
                    this.pollingList.splice(i, 1)
                  }
                }
              })
            }
          }
        })
      }, 5000)
    },
    isEnd (val) {
      if (val) {
        let arr = (this.secondListGoods.concat(this.thirdListGoods)).concat(this.fourthListGoods)
        arr.forEach(item => { item.couponStatus = 0 })
      }
    }
  },
  mounted () {
    this.init()
    // this.$store.commit('toast', { switch: true, showType: 'toast', toastText: 'drghstreh' })
  }
}
</script>
<style scoped>
  .font-19 {
    font-size: 19px;
  }
/* normal */
.button {
  width: 180px;
  height: 46px;
  background-image: linear-gradient(-90deg, #FF8794 0%, #FF6263 100%);
  border-radius: 4px;
  line-height: 46px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.button:hover {
  background-image: linear-gradient(-90deg, #FF8794 0%, #FF6263 100%);
  box-shadow: 0 3px 12px 0 #FFBABE;
}
.button:active {
  background-image: linear-gradient(-108deg, #FE595A 3%, #EC4F50 100%);
  box-shadow: 0 3px 12px 0
}
.button-disabled {
  background-image: linear-gradient(-90deg, #FFC3CA 0%, #FFB1B2 100%);
}
.button-disabled:hover {
  background-image: linear-gradient(-90deg, #FFC3CA 0%, #FFB1B2 100%);
  box-shadow: none;
}
.button-disabled:active {
  background-image: linear-gradient(-90deg, #FFC3CA 0%, #FFB1B2 100%);
  box-shadow: none;
}
.margin-right-18 {
  margin-right: 18px;
}
.margin-bottom-19 {
  margin-bottom: 19px;
}
.padding-top-17 {
  padding-top: 17px;
}
/* main */
.whiteday {
  width: 100%;
  min-width: 1200px;
  background-color: #FFECF2;
}
.whiteday .banner {
  min-width: 1200px;
}
.whiteday .banner img {
  width: 100%;
}
.whiteday .main {
  width: 1200px;
  margin: 0 auto;
}
/* first */
.first {
  width: 100%;
  margin-bottom: 45px;
  border: 16px solid #FE7D8C;
  border-radius: 6px;
  box-sizing: border-box;
}
.first > img {
  display: block;
  margin: 0 auto;
}
.first .text {
  width: 1086px;
  margin: 6px auto 29px;
}
.first .text p {
  margin-bottom: 22px;
  font-size: 18px;
  color: #FF5977;
  letter-spacing: 0;
  line-height: 18px;
}
/* sec & thr */
.second {
  width: 100%;
  margin-bottom: 65px;
}
.second > img {
  display: block;
  margin: 0 auto 39px;
}
.second .goods .good-item {
  position: relative;
  float: left;
  width: 536px;
  height: 230px;
  padding: 24px 27px 34px;
  background: url(../../assets/images/activity/2018whiteday/bg_card1.png) no-repeat;
  background-size: 590px 288px;
}
.second .goods .good-item:first-child {
  margin-right: 20px;
}
.second .goods .good-item::before {
  content: '';
  position: absolute;
  top: -33px;
  left: -39px;
  width: 126px;
  height: 122px;
  background: url(../../assets/images/activity/2018whiteday/ic_butterfly.png) no-repeat;
  background-size: 126px 122px;
}
.goods .is-received::after {
  content: '';
  position: absolute;
  right: -10.8px;
  bottom: -42.9px;
  width: 157px;
  height: 170px;
  background: url(../../assets/images/activity/2018whiteday/ic_end1.png) no-repeat;
  background-size: 157px 170px;
}
.goods .good-item .left {
  float: left;
}
.goods .good-item .right {
  float: left;
  margin-left: 10px;
}
.right .title {
  margin: 19px 0 23px;
  font-size: 24px;
  color: #3E3E3E;
  letter-spacing: 0;
  line-height: 24px;
}
.right .after-discount {
  margin-bottom: 17px;
  font-family: Thonburi;
  font-size: 16px;
  color: #5D5D5D;
  letter-spacing: 0;
  line-height: 16px;
}
.right .after-discount .big-pink {
  font-size: 36px;
  color: #FF5977;
  letter-spacing: 0;
  line-height: 36px;
}
.right .after-discount .small-pink {
  font-size: 16px;
  color: #FF5977;
  letter-spacing: 0;
  line-height: 16px;
}
.right .discount {
  margin-bottom: 33px;
  font-size: 14px;
  color: #5D5D5D;
  letter-spacing: 0;
  line-height: 14px;
}
.right .discount .big-pink {
  font-size: 18px;
  color: #FF5977;
  letter-spacing: 0;
  line-height: 18px;
}
.right .discount .small-pink {
  font-size: 14px;
  color: #FF5977;
  letter-spacing: 0;
  line-height: 14px;
}
.third {
  width: 100%;
  margin-bottom: 70px;
}
.third > img {
  display: block;
  margin: 0 auto 34px;
}
.third .goods {
  border-radius: 6px;
  background: #FE7D8C;
}
.third .goods .good-item {
  position: relative;
  float: left;
  width: 576px;
  height: 268px;
  margin: 16px;
  background: #fff;
}
.third .right .title {
  width: 336px;
}
.third .goods .good-item:first-child {
  margin-right: 0;
}
.third .goods .is-received::after {
  right: -18px;
  bottom: -27px;
}
.third .right .title {
  position: relative;
  height: 92px;
  margin: 0;
  line-height: 92px;
}
.third .right .title p {
  position: absolute;
  top: 50%;
  height: 32px;
  margin-top: -16px;
  line-height: 32px;
}
/* fourth */
.fourth {
  width: 100%;
  padding-bottom: 107px;
}
.fourth > img {
  display: block;
  margin: 0 auto 42.4px;
}
.good-list .good-item .button {
  width: 140px;
  height: 40px;
  margin: 0 auto;
}
.good-list .good-item {
  position: relative;
  float: left;
  width: 286px;
  height: 414px;
  background: #FFFFFF;
  border-radius: 6px;
  text-align: center;
}
.good-list .good-item > a {
  display: block;
  margin-top: 20px;
}
.good-list .is-received::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 139px;
  height: 148px;
  background: url(../../assets/images/activity/2018whiteday/ic_end2.png) no-repeat;
  background-size: 139px 148px;
}
.good-list .good-item .title {
  width: 205px;
  height: 48px;
  margin: 0 auto 9.7px;
  font-size: 16px;
  color: #3E3E3E;
  letter-spacing: 0;
  line-height: 24px;
}
.good-list .good-item .after-discount {
  margin-bottom: 13.3px;
  font-size: 16px;
  color: #5D5D5D;
  letter-spacing: 0;
  line-height: 16px;
}
.good-list .good-item .after-discount .big-pink {
  font-size: 26px;
  color: #FF5977;
  line-height: 26px;
}
.good-list .good-item .after-discount .small-pink {
  font-size: 16px;
  color: #FF5977;
  line-height: 16px;
}
.good-list .good-item .discount {
  margin-bottom: 16px;
  font-size: 14px;
  color: #5D5D5D;
  letter-spacing: 0;
  line-height: 14px;
}
.good-list .good-item .discount .big-pink {
  font-size: 18px;
  color: #FF5977;
  line-height: 18px;
}
.good-list .good-item .discount .small-pink {
  font-size: 14px;
  color: #FF5977;
  line-height: 14px;
}
/* iden dialog */
.iden {
  width: 460px;
  height: 241px;
  background: #FFFFFF;
  border-radius: 6px;
}
.iden .txt {
  font-family: Thonburi-Bold;
  font-size: 18px;
  color: #4F4F4F;
  letter-spacing: 0;
  text-align: center;
  line-height: 33px;
}
.iden .txt:nth-child(1) {
  padding-top: 36px;
}
.iden .button-container {
  width: 320px;
  margin: 43px auto 0;
  overflow: hidden;
}
.iden .button-container .button {
  float: left;
  width: 140px;
}
.iden .button-container .button-cancel {
  margin-left: 40px;
  border: 1px solid #FF6668;
  border-radius: 4px;
  box-sizing: border-box;
  color: #FF6668;
  background-image: none;
}
/* alert dialog */
.alert {
  width: 460px;
  height: 241px;
  background: #FFFFFF;
  border-radius: 6px;
}
.alert .txt {
  padding: 56px 0;
  font-family: Thonburi-Bold;
  font-size: 18px;
  color: #4F4F4F;
  letter-spacing: 0;
  text-align: center;
  line-height: 33px;
}
.alert .button {
  margin: 0 auto;
}
/* countdown */
.countdown {
  overflow: hidden;
}
.countdown .lf {
  float: left;
}
.countdown > p {
  margin-right: 10px;
  font-family: Thonburi;
  font-size: 14px;
  color: #5D5D5D;
  letter-spacing: 0;
  transform: translateY(85%);
}
.countdown .time-box .time-num {
  width: 36px;
  height: 38px;
  margin-right: 8px;
  border-radius: 4px;
  font-size: 16px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  line-height: 38px;
  background-image: linear-gradient(-90deg, #FF8794 0%, #FF6263 100%);
}
.countdown .time-box p {
  margin-right: 8px;
  font-size: 16px;
  color: #3E3E3E;
  letter-spacing: 0;
  line-height: 38px;
}
.good-list .countdown {
  margin-left: 29px;
}
</style>
